<template>
  <view class="room-detail-bottom">
    <view class="room-num">{{ roomNum }}房</view>
    <view class="room-num">请选择{{ typeName }}人员</view>
    <view >
      <scroll-view scroll-y="true"  class="list-wrapper"  >
        <ul
          class="to-detail"
          v-for="(item, index) in personList"
          :key="index"
          @click="goToDetail(item, personList)"
        >
          <li class="person-detail">
            <view class="serial-number">
              {{index + 1}}
            </view>
            <view>{{ item.name }}</view>
            <view class="person-phone">{{ item.telPhone || "--" }}</view>
          </li>

          <li class='person-info'>
            <view>性别：
              <text class="blue-time">{{ item.gender==0?'女':item.gender==1?'男':'--' }}</text>
            </view>
            <view>年龄：
              <text class="blue-time">{{ item.age || "--" }}</text>
            </view>
          </li>
          <li class='person-info'>
            <view class="rank">
              心理评估等级：
              <text class="rank-level-1 rank-level" v-if="item.assessmentRiskLevel==0" >低风险</text>
              <text class="rank-level-2 rank-level" v-else-if="item.assessmentRiskLevel==1">中风险</text>
              <text class="rank-level-3 rank-level" v-else-if="item.assessmentRiskLevel==2">高风险</text>
              <text class="blue-time" v-else>--</text>
            </view>
          </li>

         

          <li class="detail-time" >
            最近巡诊时间：
            <text class="blue-time">
              {{
                item.inspectTime || "--"
              }}
            </text>
          </li>

        </ul>
      </scroll-view>
      
    </view>
  </view>
</template>

<script>
export default {
  props: {
    type: String,
    roomNum: String,
    personList: Array,
    selectedFloor: String,
    searchValue: String,
  },
  data() {
    return {
      typeName: "巡诊",
      personArr: [], // 选择的人的信息
      idList:[], //
    };
  },
  watch: {
    roomNum: {
      handler(val) {
        this.personArr = [];
        this.$store.state.personDetail = [];
      },
    },
   
  },
  mounted() {
    
  },
  methods: {
    // 人员信息
    goToDetail(item, arr) {
      
      this.$store.commit('SET_IS_SELECT_ROOM', true)
      this.$store.commit('PERSON_ID', [item.personId])
      this.$store.commit('PERSON_DETAIL', arr) // 存储整个房间的人的信息
      uni.setStorage({ key: 'personInfo', data: item });

      uni.setStorageSync( 'curSelectedFloor', this.selectedFloor );
      uni.setStorageSync( 'curSearchValue', this.searchValue );
      let url = '/packageAlpha/pages/psychologicalInspection/form'
      console.log(url);
      uni.navigateTo({
        url: url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.room-detail-bottom {
  padding: 21rpx 32rpx;
  .room-num {
    font-size: 40rpx;
    padding-bottom: 36rpx;
  }
  ul {
    // display: flex;
    position: relative;
    width: 686rpx;
    min-height: 210rpx;
    margin-bottom: 32rpx;
    background: #ffffff;
    box-shadow: 0rpx 8rpx 20rpx #e5e5e5;
    border-radius: 16rpx;
  }
  .to-detail:after {
    content: "";
    position: absolute;
    top: 63rpx;
    right: 20rpx;
    width: 44rpx;
    height: 44rpx;
    background: url("https://szgd-dev.tgovcloud.com/public/images/right-arrow.png") no-repeat;
    background-size: contain;
  }
  .list-wrapper {
    height: 60vh;
  }
  .person-detail {
    display: flex;
    padding: 36rpx 0 18rpx;
    view {
      height: 50rpx;
      &:nth-child(2) {
        padding-right: 20rpx;
        font-size: 36rpx;
        font-weight: bold;
        line-height: 50rpx;
        color: #333333;
      }
    }
  }
  .person-detail-check-out{
    padding: 36rpx 0 10rpx;
  }
  .serial-number {
    width: 50rpx;
    height: 50rpx;
    margin: 0rpx 10rpx 0 20rpx;
    background: #2c9af1;
    border-radius: 50%;
    font-size: 36rpx;
    font-weight: 400;
    line-height: 50rpx;
    color: #ffffff;
    text-align: center;
  }
  .check-box {
    position: relative;
    width: 50rpx;
    height: 50rpx;
    margin: 0rpx 10rpx 0 20rpx;
    background: #2c9af1;
    border-radius: 50%;
    border: 1px solid transparent;
    font-size: 36rpx;
    font-weight: 400;
    line-height: 50rpx;
    text-align: center;
    &:before {
      content: "";
      position: absolute;
      top: 17rpx;
      right: 11rpx;
      width: 26.85rpx;
      height: 18.99rpx;
      background: url("https://szgd-dev.tgovcloud.com/public/images/check-icon.png") no-repeat;
      background-size: contain;
    }
  }
  .empty-check-box {
    width: 50rpx;
    height: 50rpx;
    margin: 0rpx 10rpx 0 20rpx;
    background: #f0f0f0;
    border: 1px solid #707070;
    border-radius: 50%;
  }
  .person-phone {
    height: 50rpx;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 50rpx;
    color: #666666;
  }
  .padding-phone {
    padding-left: 84rpx;
  }
  .person-info{
    display:flex;
    font-size:28rpx;
    color:#666666;
    margin-bottom:10rpx;
    view{
      margin:0 80rpx;
    }
    .rank {
      .rank-level {
        margin-left: 16rpx;
        width: 124rpx;
        border-radius: 4rpx;
        font-family: PingFang SC;
        font-size: 28rpx;
        font-weight: 400;
        height: 50rpx;
        line-height: 50rpx;
        text-align: center;
        display: inline-block;
      }
      .rank-level-1 {
        background: rgba(255, 172, 30, 0.1);
        border: 2px solid rgba(255, 172, 30, 0.5019607843137255);
        color: #FFAC1E;;
      }
      .rank-level-2 {
        background: rgba(240, 120, 16, 0.1);
        border: 2px solid rgba(240, 120, 16, 0.5019607843137255);
        color: #F07810;
      }
      .rank-level-3 {
        color: #F15B53;;
        background: rgba(241, 91, 83, 0.1);
        border: 2px solid rgba(241, 91, 83, 0.5019607843137255);
      }
    }
  }
  .detail-time {
    height: 40rpx;
    margin-left: 80rpx;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 40rpx;
    color: #666666;
  }
  .blue-time {
    color: #2c9af1;
  }
  .origin-tips{
    color: rgba(247, 150, 114, 1);
  }
  button[type="primary"] {
    margin-top: 22rpx;
    background-color: #2c9af1;
  }
  // .serial-number {
  //   width: 50rpx;
  //   height: 50rpx;
  //   background: #2c9af1;
  //   border-radius: 50%;
  // }
}
</style>
